<template>
  <div 
    class="searchbar-container"
    :style="{ backgroundColor: outerBg }"
  >
    <div
      :class="{ border: hasBorder }"
      :style="{ backgroundColor: innerBg }"
    >
      <van-icon color="#ee7530" size=".2rem" name="search" />
      想吃什么搜这里，比如川菜。
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Icon } from 'vant'
  Vue.use(Icon)
  export default {
    props: {
      outerBg: {
        type: String,
        default: '#f4f5f7'
      },
      innerBg: {
        type: String,
        default: '#ffffff'
      },
      hasBorder: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

<style lang="scss" scoped>
@import '@/assets/border.scss';
.searchbar-container {
  padding: .1rem .15rem;
  > div {
    height: .4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8a8a8a;

    .van-icon-search {
      margin-right: .04rem
    }

    @include border_1px(null, #ee7530, 0.05rem)
  }
}
</style>